<template>
    <div>
        <!-- 首页内容显示出来的前提是当前路由是  /home -->
        <transition name="myFade">
            <div v-show="$route.fullPath=='/home'" class="home">

                <van-search v-model="inputVal" placeholder="请输入搜索关键词" readonly @click="showPopup" />
                <Swipe :swipeImg="swipeImg" />

                <van-grid :column-num="5">
                    <van-grid-item v-for="item in channelArr" :key="item.id" :icon="item.icon_url"
                        :text="item.name" @click="goChannelPage(item.id)"/>
                </van-grid>

                <div class="brand">
                    <h3>品牌制造商直供</h3>
                    <ul class="brandList">
                        <li v-for="item in brandArr" :key="item.id" @click="goBrandPage(item.id)">
                            <img :src="item.pic_url" alt="" />
                            <h4>{{item.name}}</h4>
                            <p>{{item.floor_price|RMB}}</p>
                        </li>
                    </ul>
                </div>

                <van-sticky :offset-top="0" class="toTop">
                    <van-button plain type="default" class="toTopbtn" @click="backTop">
                        <van-icon name="back-top" />
                    </van-button>
                </van-sticky>

                <Chanpin :chanpinArr="newGoodsArr">
                    <h3 class="chanpinTitle">周一周四，新品首发</h3>
                </Chanpin>

                <div class="recommend">
                    <h3>人气推荐</h3>
                    <van-card v-for="(item,index) in hotGoodsArr" :key="index" :price="item.retail_price|RMB"
                        :desc="item.goods_brief" :title="item.name" :thumb="item.list_pic_url" currency="" @click="toHotDetails(item.id)" />
                </div>

                <div class="zhuanti">
                    <h3>专题精选</h3>
                    <SwipeFree :topicArr="topicArr" />
                </div>

                <Chanpin :chanpinArr="item.goodsList" class="category" v-for="(item,index) in categoryArr" :key="index">
                    <h3 class="chanpinTitle2">{{item.name}}</h3>
                </Chanpin>

                <div style="height:50px"></div>

            </div>
        </transition>
        <transition name="fade">
            <div class="mymodal" v-show="$route.fullPath=='/home/popup'"></div>
        </transition>
        <transition name="slide">
            <router-view />
        </transition>
    </div>
</template>


<script>
    import {
        HomeApi
    } from '../request/api'

    import Swipe from "@/components/Swipe.vue"
    import SwipeFree from "@/components/SwipeFree.vue"
    import Chanpin from '@/components/Chanpin.vue'
    import {mapMutations, mapState} from "vuex"

    export default {
        data() {
            return {
                swipeImg: [],
                inputVal: "",
                showModal: false,
                channelArr: [],
                brandArr: [],
                newGoodsArr: [],
                hotGoodsArr: [],
                topicArr: [],
                categoryArr: [],
            }
        },
        created() {
            this.backTop();
            document.documentElement.scrollTop=0
            /* axios.get('http://kumanxuan1.f3322.net:8001/index/index').then(res=>{
                console.log(res);
            })
                alt+shift+A */

            HomeApi().then(res => {
                // console.log(res);
                for (var i = 0; i < res.data.banner.length; i++)
                    this.swipeImg.push(res.data.banner[i].image_url);
                res.data.channel.forEach(element => {
                    this.channelArr.push(element)
                });
                let {
                    brandList,
                    newGoodsList,
                    hotGoodsList,
                    topicList,
                    categoryList
                } = res.data; // 从一个对象中解构一个字段出来
                this.brandArr = brandList;
                this.newGoodsArr = newGoodsList;
                this.hotGoodsArr = hotGoodsList;
                this.topicArr = topicList;
                this.categoryArr = categoryList;
                // console.log(this.topicArr);
            })

        },
        components: {
            Swipe,
            SwipeFree,
            Chanpin
        },
        methods: {
            ...mapMutations(["activeNamePush"]),
            // toggleBoxFn(){
            //     this.showBox=!this.showBox
            // },

            // 人气推荐跳转至详情页
            toHotDetails(id){
                this.$router.push(`/detail/${id}`)
            },
            showPopup() {
                this.$router.push("/home/popup")
                // 当路径变成了  /home/popup 的时候，透明层就过渡为黑色
            },
            // 返回顶部
            backTop() {
                scrollTo(0, 0);
            },
            goChannelPage(val){
                this.activeNamePush(val);
                this.$router.push({path:'/channel',query:{"id":val}})
            },

            goBrandPage(id){
                this.$router.push(`/brand/${id}`);
            }
        }
    }
</script>

<style lang="less" scoped>
    .home{
        background-color:#efefef
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    .mymodal {
        width: 100%;
        height: 100%;
        background-color: #333;
        position: fixed;
        left: 0;
        top: 0;
    }

    /* 右侧滑动进入 -- start */
    .slide-enter,
    .slide-leave-to {
        right: -100%;
    }

    .slide-enter-active,
    .slide-leave-active {
        transition: right 0.5s linear;
    }

    .slide-enter-to,
    .slide-leave {
        right: 0;
    }

    /* 右侧滑动进入 -- end */

    /* 右侧淡入淡出 -- start */
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s linear;
    }

    .fade-enter-to,
    .fade-leave {
        opacity: 1;
    }

    /* 右侧淡入淡出 -- end */

    /* 首页淡入淡出 -- start */
    .myFade-enter,
    .myFade-leave-to {
        opacity: 0;
    }

    .myFade-enter-active {
        transition: opacity 0.3s linear;
    }

    .myFade-leave-active {
        transition: opacity 1s linear;
    }

    .myFade-enter-to,
    .myFade-leave {
        opacity: 1;
    }

    /* 首页淡入淡出 -- end */


    /* 图标导航 -- start */
    .van-grid-item {
        font-size: 12px;
    }

    /* 图标导航 -- end */

    /* 品牌制造商直供 -- start */
    .brand {
        text-align: center;
        border-top: 1px solid #fff;
        background-color: #fff;
        margin: 19px 0;

        h3 {
            margin: 10px;
            font-size: 20px;
        }

        .brandList {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            background: #fff;

            li {
                width: 49%;
                font-size: 14px;
                font-family: "黑体";
                position: relative;

                img {
                    width: 100%;
                    // display: block;
                }

                h4 {
                    position: absolute;
                    top: 10px;
                    left: 10px;

                }

                p {
                    position: absolute;
                    color: darkred;
                    top: 40px;
                    left: 10px;
                    margin: 0;
                }

            }
        }
    }

    /* 品牌制造商直供 -- end */

    /* 人气推荐 -- start */
    .recommend {
        border-top: 1px solid #fff;
        background-color: #fff;
        margin-top: 10px;

        h3 {
            text-align: center;
            padding: 15px;
            font-size: 20px;
        }

        .van-card {

            .van-card__title {
                max-height: 32px;
                font-weight: 500;
                line-height: 29px;
                font-size: 18px;
            }

            .van-card__desc {
                height: 40px;
                max-height: 100px;
                line-height: 40px;
            }

            .van-card__price {
                line-height: 20px;
                color: #8d0000;
                font-size: 12px;

                .van-card__price-integer {
                    font-size: 12px;
                }
            }
        }
    }

    /* 人气推荐 -- end */

    /* 专题精选 -- start */
    .zhuanti {
        margin: 20px 0;
        background-color: #fff;
        padding: 0px 8px;

        h3 {
            text-align: center;
            padding: 15px;
            font-size: 20px;
        }
    }

    /* 专题精选 -- end */

    /* 大分类 -- start */
    .category {
        padding-top: 18px;
    }

    /* 大分类 -- end */

    .toTop {
        position: relative;
        float: left;

        .toTopbtn {
            position: absolute;
            top: 700px;
            right: 20px;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 5px;

            .van-button__text {
                font-size: 25px;
                line-height: 25px;
            }
        }
    }
</style>